<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电子产品 | 合金车载充电器</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .header {
            width: 1250px;
            height: 80px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .header .h-container {
            height: 100%;
            width: 323px;
            background-color: #ffc42a;
            transform: skewX(-20deg);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .h-container .hc-c {
            display: flex;
            transform: skewX(20deg);
            font-size: 12px;
        }

        .h-container .hc-c p {
            display: flex;
            align-items: center;
            margin-right: 15px;
        }

        .hc-c .h-c-img {
            width: 15px;
        }

        .header-nav {
            width: 1250px;
            font: 14px;
            color: #fff;
            background-size: 2px 100%;
            background-color: #2e2e2e;
            display: flex;
        }

        .header-nav p {
            height: 66px;
            padding-left: 20px;
            padding-right: 20px;
            text-align: center;
            line-height: 66px;
        }

        .header-nav p:first-child {
            padding-left: 0px;
        }

        .header-nav p:hover {
            color: #ffc42a;
        }

        .header-tabs {
            height: 60px;
            line-height: 60px;
            font-size: 12px;
        }

        .container {
            width: 1250px;
            height: 867px;
            display: flex;
            box-sizing: border-box;
            overflow: hidden;
            justify-content: space-between;
        }

        .box2 {
            width: 350px;
            height: 350px;
            border: 1px solid #ccc;
            position: relative;
        }

        .big {
            width: 400px;
            height: 400px;
            position: absolute;
            top: 0;
            left: 360px;
            border: 1px solid #ccc;
            overflow: hidden;
            display: none;
        }

        .mask {
            width: 175px;
            height: 175px;
            background: rgba(255, 255, 0, 4);
            position: absolute;
            top: 0;
            left: 0;
            cursor: move;
            display: none;
        }

        .small {
            position: relative;
        }

        .box img {
            vertical-align: top;
        }

        #bigBox img {
            position: absolute;
            width: 252px;
            height: 252px;
        }

        .cc-right .ccl-title {
            margin-top: 40px;
            font-size: 20px;
            font-weight: 600;
            color: #2e2e2e;
        }

        .b-border1.b-border2 {
            margin-top: 10px;
            width: 30px;
            border-bottom: 4px solid #ffc42a;
        }

        .btns {
            display: flex;
            justify-content: flex-end;
        }

        .btns .btn {
            font-size: 15px;
            font-weight: normal;
            color: #ffffff;
            border-color: #ffc42a;
            background-color: #ffc42a;
            padding-top: 12px;
            padding-bottom: 12px;
            padding-left: 40px;
            padding-right: 40px;
            background-image: none;
            margin-right: 20px;
        }

        .btns .btn:hover {
            background-color: #a3905f;
        }

        .footer {
            height: 336px;
            background-color: #f7f7f7;
            padding-top: 150px;
            padding-bottom: 150px;
            box-sizing: border-box;
        }

        .footer {
            width: 1250px;
            display: flex;
            justify-content: space-between;
            padding-top: 60px;
            box-sizing: border-box;
        }

        .f-top {
            margin-bottom: 20px;
        }

        .footer-1 .f-title {
            font-size: 24px;
            font-weight: 500;
            color: #000;
        }

        .footer-1 .f-content {
            font-size: 15px;
            color: #555555;
            margin-top: 20px;
        }

        .f-content p {
            margin-bottom: 10px;
        }

        .f-content2 {
            height: 90px;
            display: flex;
            align-items: center;
        }

        .f-content2 textarea {
            height: 100%;
        }

        .f-content2 button {
            height: 100%;
            background-color: #ffc42a;
            margin-left: 20px;
            padding-left: 10px;
            padding-right: 10px;
            border: none;
        }

        .color-1 {
            background-color: #f7f7f7;
        }

        .color-2 {
            background-color: #2e2e2e;
        }

        .color-3 {
            background-image: linear-gradient(to right, #fff, #f4f8fb);
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="header">
            <a href="../pages/Neast163.html">
                <img src="../images/logo.png" alt="" class="logo"></a>
            <div class="h-container">
                <div class="hc-c">
                    <a href="" style="color:black;text-decoration:none ;">
                        <img class="h-c-img" src="../images/img01.png" alt=""> 个人中心
                    </a>
                    <a href="../pages/Neaste163.html" style="color:black;text-decoration:none ;">
                        <img class="h-c-img" src="../images/img02.png" alt=""> 退出登录
                    </a>
                    <a href="../pages/NeastShopping.html">
                        <img class="h-c-img" src="../images/img03.png" alt="">
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="box color-2">
        <div class="header-nav">
            <p><a href="../pages/Neast163.html" style="color: #fff;text-decoration:none;">首页</a></p>
            <p><a href="../pages/inde.html" style="color: #fff;text-decoration:none;">关于</a></p>
            <p><a href="../pages/faqa.html" style="color: #fff;text-decoration:none;">FAQ</a></p>
            <p><a href="../pages/NeasteAftershop.html" style="color: #fff;text-decoration:none;">售后</a></p>
            <p><a href="../pages/sugges.html" style="color: #fff;text-decoration:none;">联系</a></p>
        </div>
    </div>
    <div class="header-tabs" style="margin-left:200px ;">
        首页 / 售后
    </div>
    <div>
        <div class="box2" id="box2" style="margin-left:200px ;">
            <div id="smallBox" class="small">
                <img src="../images/small.png" style="height:352px ;width: 352px;">
                <div id="mask" class="mask"></div>
            </div>
            <div id="bigBox" class="big">
                <img id="bigImg" src="../images/big.png" style="height: 500px;width: 750px; background-color: white;">
            </div>
        </div>
    </div>
    <div class="cc-right" style="float: right;margin-bottom: 50px; position: absolute; top:200px;margin-left: 800px;">
        <div class="ccl-title" style="color: #ffc42a ;font-size: 40px;">
            合金车载充电器
            <p class="b-border1" style="color: black;font-size: 30px;">￥188.00</p>
            <p class="b-border2" style="color: grey; font-size: 15px;">高清音质，语音声控， 智慧连接，已适配Nex系列、iQOO Pro（5G）、<br />
                X27系列，Z5等机型，更多机型陆续适配中（注：拆封后不支持无理由退货）
            </p>
        </div>
    </div>
    <div class="btns" style="float: right;margin-bottom: 50px; position: absolute; top:450px;margin-left: 800px;">
        <div class="btn"><a href="../pages/NeastShopping.html">前往购物车</a></div>
        <span>
            <button type="button" onclick="minus(this)">-</button>
            <input type="text" id="" value="1" style="height: 25px; width:40px">
            <button type="button" onclick="add(this)">+</button>
        </span>
    </div>

    <div class="box color-1">
        <div class="footer">
            <div class="footer-1">
                <div class="f-top">
                    <p class="f-title">
                        Contact
                    </p>
                    <p class="f-content">
                        地址：江苏省苏州市工业园区中新大道西加成大厦
                    </p>
                </div>
                <div class="f-bottom">
                    <p class="f-title">
                        +86 123 1234 1234
                    </p>
                    <p class="f-content">
                        邮箱：qifeiye@admin.com
                    </p>
                </div>
            </div>
            <div class="footer-1">
                <p class="f-title">
                    Quick Links
                </p>
                <div class="f-content">
                    <p>常见问题</p>
                    <p>测评中心</p>
                    <p>保修政策</p>
                    <p>售后服务</p>
                    <p>售后服务</p>
                </div>
            </div>
            <div class="footer-1">
                <p class="f-title">
                    Products
                </p>
                <div class="f-content">
                    <p>充电</p>
                    <p>手机</p>
                    <p>生活</p>
                    <p>配件</p>
                    <p>音乐</p>
                </div>
            </div>
            <div class="footer-1">
                <p class="f-title">
                    Feedback
                </p>
                <div class="f-content f-content2">
                    <textarea placeholder="内容" name="" id="idea" cols="50" rows="5"></textarea>
                    <button onclick="submit()">提交</button>
                </div>
            </div>
        </div>
    </div>
    </div>
</body>
<script>
    function $(id) {
        return document.getElementById(id);
    }
    //鼠标经过盒子 显示遮罩和大图
    $('smallBox').onmouseover = function () {
        $('mask').style.display = 'balk';
        $('bigBox').style.display = 'block';
    };
    //鼠标离开盒子 隐藏遮罩和大图
    $('smallBox').onmouseout = function () {
        $('mask').style.display = 'none';
        $('bigBox').style.display = 'none';
    };
    //鼠标在盒子上移动的时候
    //让遮罩跟着鼠标移动
    $('smallBox').onmousemove = function (event) {
        var event = event || window.event;
        //鼠标在页面中的坐标
        var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;
        var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;
        //计算鼠标的位置 距 盒子 的距离
        var box2X = pageX - $('box2').offsetLeft;
        var box2Y = pageY - $('box2').offsetTop;
        //计算遮罩的位置
        var maskX = box2X - $('mask').offsetWidth / 2;
        var maskY = box2Y - $('mask').offsetHeight / 2;
        //限定遮罩可移动范围
        if (maskX < 0) {
            maskX = 0;
        }
        if (maskX > $('smallBox').offsetWidth - $('mask').offsetWidth) {
            maskX = $('smallBox').offsetWidth - $('mask').offsetHeight;
        }
        if (maskY < 0) {
            maskY = 0;
        }
        if (maskY > $('smallBox').offsetHeight - $('mask').offsetHeight) {
            maskY = $('smallBox').offsetHeight - $('mask').offsetHeight;
        }
        //修改遮罩的显示位置
        $('mask').style.left = maskX + 'px';
        $('mask').style.top = maskY + 'px';
        //按比例移动大图 大图片能够移动的总距离 = 大图的宽度 - 大盒子的宽度
        var bigImgToMove = $('bigImg').offsetWidth - $('bigBox').offsetWidth;
        //遮罩能够移动的总距离 = 小盒子的宽度 - 遮罩的宽度
        var maskToMove = $('smallBox').offsetWidth - $('mask').offsetWidth;
        //计算移动比例rate = 大图片能够移动的总距离/遮罩能够移动的总距离
        var rate = bigImgToMove / maskToMove;
        //设置大图片当前的位置 = rate*遮罩当前的位置
        $('bigImg').style.left = -rate * maskX + 'px';
        $('bigImg').style.top = -rate * maskY + 'px';
    }

    function minus(btn) {
        var num = btn.parentElement.children[1].value;
        if (num == 0) {
            return;
        }
        btn.parentElement.children[1].value = --num;

        var price = btn.parentElement.previousElementSibling.lastElementChild.innerText;
        var total = (parseFloat(price) * num).toFixed(2);
        btn.parentElement.nextElementSibling.lastElementChild.innerText = total;
        _sum.innerText = (parseFloat(_y.innerText) + parseFloat(_e.innerText)).toFixed(2);
    }

    function add(btn) {
        var num = btn.parentElement.children[1].value;
        btn.parentElement.children[1].value = ++num;
        var price = btn.parentElement.previousElementSibling.lastElementChild.innerText;
        var total = (parseFloat(price) * num).toFixed(2);
        btn.parentElement.nextElementSibling.lastElementChild.innerText = total;
        _sum.innerText = (parseFloat(_y.innerText) + parseFloat(_e.innerText)).toFixed(2);
    }

    function submit() {
        // 获取输入框元素的输入数据，并且去除空格
        var idea = document.getElementById('idea').value.trim()
        // 判定是输入框是否有内容
        if (!idea) {
            // 弹框提示
            alert('请输入内容在提交');
        } else {
            alert('感谢您的意见');
        }
    }
</script>
</body>

</html>